<template>
	<div class="infinite-list-wrapper" style="overflow:auto;text-align: center;" v-loading="devLoading"
		element-loading-text="加载中">
		<ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled" infinite-scroll-distance="10pt">
			<li v-for="(item, key) in orderMap" class="list-item">
				<el-card class="el-card">
					<el-row :gutter="24">
						<el-col :span="12">
							<h4 v-if="item[1].customer">{{ item[1].customer.name }}</h4>
						</el-col>
						<el-col :span="4">
							<h5></h5>
						</el-col>
						<el-col :span="8" style="text-align: right;">
							<h5>{{ orderStatusStr[item[1].status] }}</h5>
						</el-col>
					</el-row>

					<el-row :gutter="24" style="margin-top: 10pt; color: #b3b3b3; text-align: left;">
						<el-col :span="12">
							<h5>地址：{{ item[1].address }}</h5>
							<h5>项目名称：{{ truncatedProblem(item[1].problem, 5) }}</h5>
							<h5>创建时间：{{ truncatedProblem(item[1].createdAt, 10) }}</h5>
						</el-col>

						<el-col :span="12" style="text-align: right;">
							<h5>报修人：{{ item[1].publisher.name }}</h5>
							<h5 v-if="item[1].status!=0">指派人：{{ item[1].assignee.name }}</h5>
							<h5 v-if="item[1].status!=0">维修人：{{ item[1].repairman.name }}</h5>
						</el-col>
					</el-row>
					<el-row :gutter="24" style="margin-top: 10pt; color: #b3b3b3;">
						<el-col :span="12">
							<el-button @click="onOrderDetailed(item[1])">查看</el-button>
						</el-col>
						<el-col :span="12">
							<el-button @click="assign(item[1])"
								v-if="item[1].status == 0 && ($Global.user.role.role_permission & 4194304) != 0">指派</el-button>
						</el-col>
						<el-col :span="12">
							<el-button @click="receivingOrder(item[1])" v-if="item[1].status == 1 && canreceivingOrder(item[1])">接单</el-button>
						</el-col>
						<el-col :span="12">
							<el-button @click="finishOrder(item[1])" v-if="item[1].status == 2">提交</el-button>
						</el-col>
						<el-col :span="12">
							<el-button @click="delOrder(item[1])"
								v-if="($Global.user.role.role_permission & 8192) != 0">删除</el-button>
						</el-col>
						<el-col :span="12">
							<el-button @click="editOrder(item[1])"
								v-if="($Global.user.role.role_permission & 16384) != 0">修改</el-button>
						</el-col>
						<el-col :span="12">
							<el-button @click="assign(item[1])"
								v-if="item[1].status != 0 && ($Global.user.role.role_permission & 16384) != 0">重派</el-button>
						</el-col>
					</el-row>
				</el-card>
			</li>
		</ul>
		<p v-if="loading">加载中...</p>
		<p v-if="noMore">没有更多了</p>

		<!-- 确认对话框 -->
		<el-dialog :visible.sync="showConfirm" title="确认删除" width="70%" @close="resetConfirm">
			<p>是否确定要删除此工单？</p>
			<span slot="footer" class="dialog-footer">
				<el-button @click="resetConfirm">取消</el-button>
				<el-button type="primary" @click="doDelete">确定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
import { tr } from '@dcloudio/vue-cli-plugin-uni/packages/postcss/tags'
import Api from '../api/api'
export default {
	name: "orderMap",
	props: {
		status: {
			type: Number,
			default: 0
		},
		member_id: {
			type: String,
			default: ''
		},
		order_id: {
			type: String,
			default: ''
		},
		assignee_id: {
			type: String,
			default: ''
		},
		publisher_id: {
			type: String,
			default: ''
		},
	},
	data() {
		return {
			roles: [],
			showConfirm: false,
			deletingOrder: null,
			orderStatusStr: ['待指派', '待接单', '工作中', '已完成', '未完成'],
			orderMap: new Map(),
			pageInfo: { currentPage: 0 },
			loading: false,
			isupdate: false,
			devLoading: false
		}

	},
	computed: {
		noMore() {
			return this.orderMap.size >= this.pageInfo.totalItems
		},
		disabled() {
			return this.isupdate == false && (this.loading || this.noMore)
		},
		truncatedProblem: function () {
			return function (str, len) {
				return str.length > len ? str.slice(0, len) : str
			}
		},
		canreceivingOrder: function () {
			return function (item) {
				for(let index in item.member_list)
				{
					let member_id = item.member_list[index]._id
					if(this.$Global.user._id==member_id)
					return true
				}
				return false
			}
		},
	},
	methods: {
		onOrderDetailed(date) {
			console.log(date)
			uni.navigateTo({
				url: '/pages/orderdetailed/orderdetailed?_id=' + date._id
			})
		},
		assign(date) {
			uni.reLaunch({
				url: '/pages/assign/assign?_id=' + date._id
			})
		},
		receivingOrder(date) {
			this.devLoading = true
			// 使用 formData 对象进行处理
			let mentioned_mobile_list = []
			mentioned_mobile_list.push(date.repairman._id)
			let content = "工单已接受" +
				"\n客户:" + date.customer.name +
				"\n维修人员:" + date.repairman.name +
				"\n连接:" + Api.baseWebUrl + "#/pages/tabbar/orders/orders?order_id=" + date._id
			let message = {
				"msgtype": "text",
				"text": {
					"content": content,
					"mentioned_mobile_list": mentioned_mobile_list
				}
			}
			console.log(message)
			Api.sendGroupMessages(message).then(response => {
				console.log(response.data)
				if (response.status == 200) {
					Api.acceptWorkOrders({ id: date._id }).then(response => {
						console.log(response.data)
						if (response.status == 200) {
							uni.redirectTo({
								url: '/pages/tabbar/orders/orders?status=2',
							})
						} else {
							this.$message.success(response.data.message)
						}
						this.devLoading = false
					})
				} else {
					this.devLoading = false
				}
			})
		},
		finishOrder(date) {
			console.log("finishOrder")
			uni.redirectTo({
				url: '/pages/finishorder/finishorder?_id=' + date._id
			})
		},
		load() {
			if (this.isupdate) {
				this.loading = false
				this.isupdate = false
				return
			}
			this.loading = true
			let currentPage = this.pageInfo.currentPage + 1
			if (currentPage) {
				console.log(this.status)
				console.log(this.member_id)
				console.log(this.order_id)
				console.log(this.assignee_id)
				console.log(this.publisher_id)
				// 根据 status 动态创建查询条件
				const search = {};
				if (this.status != null) {
					search['status'] = this.status;
				}
				if (this.order_id != null) {
					search['_id'] = this.order_id
				}
				if (this.assignee_id != null) {
					search['assignee'] = this.assignee_id
				}
				if (this.publisher_id != null) {
					search['publisher'] = this.publisher_id
				}
				if (this.member_id != null) {
					search['member_list'] = { '$elemMatch': { _id: this.member_id } }
				}
				console.log(search)
				Api.getWorkOrders({ search: search, page: currentPage }).then(response => {
					if (response.status == 200) {
						let orderMap = response.data.data.reduce((obj, item) => {
							obj[item._id] = item;
							return obj;
						}, {});
						// 将 orderList 转换为 Map 对象
						orderMap = new Map(Object.entries(orderMap));
						// 将新的键值对添加到 this.orderList 中
						orderMap.forEach((value, key) => {
							this.orderMap.set(key, value);
						});
						this.pageInfo = response.data.page
						this.loading = false
						console.log("orderMap", this.orderMap)
					}
				})
			}
		},
		editOrder(date) {
			uni.navigateTo({
				url: '/pages/editorder/editorder?_id=' + date._id
			})
		},
		delOrder(date) {
			this.deletingOrder = date // 保存要删除的工单对象
			this.showConfirm = true // 显示确认对话框
		},
		doDelete() {
			// 执行实际的删除操作
			this.devLoading = true
			Api.delWorkOrders({ id: this.deletingOrder._id }).then(response => {
				console.log(response.data)
				if (response.status == 200) {
					this.orderMap.delete(response.data.id)
					console.log(this.orderMap)
					this.isupdate = true
					this.loading = true
				}
				this.$message.success(response.data.message)
				this.devLoading = false
			})
			this.resetConfirm() // 关闭对话框并重置数据
		},
		resetConfirm() {
			this.showConfirm = false
			this.deletingOrder = null
		},
	},

	mounted() {
	},
}
</script>

<style>
.content {
	text-align: center;
	margin-top: 200upx;
}

.time {
	font-size: 13px;
	color: #999;
}

.bottom {
	margin-top: 13px;
	line-height: 12px;
}

.button {
	padding: 0;
	float: right;
}

.image {
	width: 100%;
	display: block;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: "";
}

.clearfix:after {
	clear: both
}

.bg-page {
	text-align: center;
	padding: 0px;
	margin: 0px;
}

.el-card {
	border-radius: 4px;
	border: 1px solid #e6ebf5;
	background-color: #fff;
	overflow: hidden;
	color: #303133;
	transition: .3s;
	margin: 5px;
	margin-right: 20px;
}
</style>
